<!doctype html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="renderer" content="webkit">
	<title>DingFlow可视化大屏</title>
	<script th:src="@{/js/jquery.min.js}"></script>
	<script th:src="@{/js/bootstrap.min.js}"></script>
	<link th:href="@{/css/comon0.css}" rel="stylesheet"/>
</head>
<script type="text/javascript">
	$(document).ready(function(){
		var html=$(".wrap ul").html()
		$(".wrap ul").append(html)
		var ls=$(".wrap li").length/2+1
		i=0
		ref = setInterval(function(){
			i++
			if(i==ls){
				i=1
				$(".wrap ul").css({marginTop:0})
				$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
			}
			$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)


		},2400);

		var html2=$(".adduser ul").html()
		$(".adduser ul").append(html2)
		var ls2=$(".adduser li").length/2+1
		a=0
		ref = setInterval(function(){
			a++
			if(a==ls2){
				a=1
				$(".adduser ul").css({marginTop:0})
				$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)
			}
			$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)
		},4300);
	})

    function current(){
        var d=new Date(),
		str='';
        str +=d.getFullYear()+'年';   //获取当前年份
        str +=d.getMonth()+1+'月';   //获取当前月份（0——11）

        str +=d.getDate()+'日';
        str +=d.getHours()+'时';
        str +=d.getMinutes()+'分';
        str +=d.getSeconds()+'秒';
        return str;
	}
    setInterval(function(){$("#nowTime").html(current)},1000);

</script>
<body>
<div class="loading">
	<div class="loadbox"> <img th:src="@{/images/loading.gif}"> 页面加载中... </div>
</div>
<div class="head">
	<h1>Ding-Flow可视化大屏</h1>
	<div class="weather"><img th:src="@{/images/weather.png}"><span>多云转小雨</span><span id="nowTime"></span></div>
</div>
<div class="mainbox">
	<ul class="clearfix">
		<li>
			<div class="boxall" style="height: 2.7rem">
				<div class="alltitle">流程概况</div>

				<div class="sycm">
					<ul class="clearfix">
						<li><h2 th:text="${flowGeneralSituation.todoTaskNum}"></h2><span>我的待办数</span></li>
						<li><h2 th:text="${flowGeneralSituation.doneTaskNum}"></h2><span>我的已办数</span></li>
						<li><h2 th:text="${flowGeneralSituation.myStartProcessInstanceNum}"></h2><span>我发起的审批数</span></li>
					</ul>
					<div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
					<ul class="clearfix">
						<li><h2 style="color: red" th:text="${flowGeneralSituation.threeTodoTaskNum}"></h2><span>超时任务数(3天)</span></li>
						<li><h2 th:text="${flowGeneralSituation.processInstanceNum}"></h2><span>总流程数</span></li>
						<li><h2>19</h2><span>流程消息数</span></li>
					</ul>
				</div>
				<div class="boxfoot"></div>
			</div>
			<div class="boxall" style="height: 2.65rem">
				<div class="alltitle">钉钉数据同步概况</div>
				<div class="sy" id="echarts1"></div>
				<div class="sy" id="echarts9"></div>
				<div class="sy" id="echarts2"></div>
				<div class="sy" id="echarts3"></div>
				<div class="boxfoot"></div>
			</div>
			<div class="boxall" style="height: 2.95rem">
				<div class="alltitle">账单消费概况</div>
				<div id="echarts4" style="height: 2.2rem; width: 100%;"></div>
				<div class="boxfoot"></div>
			</div>
		</li>
		<li>
			<div class="bar">
				<div class="barbox">
					<ul class="clearfix">
						<li class="pulll_left counter" style="color: red">[[${financeBillSituation.expenditureTotal}]]</li>
						<li class="pulll_left counter">[[${financeBillSituation.inComeTotal}]]</li>
					</ul>
				</div>
				<div class="barbox2">
					<ul class="clearfix">
						<li class="pulll_left">支出总金额（元）</li>
						<li class="pulll_left">收入总金额（元）</li>
					</ul>
				</div>
			</div>
			<div class="map">
				<div class="map1"><img  th:src="@{/images/lbx.png}" ></div>
				<div class="map2"><img th:src="@{/images/jt.png}" ></div>
				<div class="map3"><img th:src="@{/images/map.png}" ></div>
				<div class="map4" id="map_1"></div>
			</div>
		</li>
		<li>
			<div class="boxall" style="height:5.2rem">
				<div class="alltitle">钉钉信息</div>
				<div class="tabs">
					<ul class="clearfix">
						<li><a class="active" href="#">7天</a></li>
						<li><a href="#">15天</a></li>
						<li><a href="#">30天</a></li>
					</ul>
				</div>
				<div class="clearfix">
					<div class="sy" id="echarts6"></div>
					<div class="sy" id="echarts7"></div>
					<div class="sy" id="echarts8"></div>
					<div class="sy" id="echarts10"></div>
				</div>
				<div class="addnew">
					<div class="tit02"><span>今日新增流程</span></div>
					<div class="adduser">
						<ul class="clearfix">

							<li class="clearfix" th:each="historicProcessInstance,historicProcessInstanceStat : ${historicProcessInstanceList}">
								<span class="pulll_left" th:text="${historicProcessInstanceStat.count}"></span>
								<span class="pulll_left">.</span>
								<span class="pulll_left" th:text="${historicProcessInstance.processDefinitionName}"></span>
								<span class="pulll_right" th:text="${#dates.format(historicProcessInstance.startTime, 'yyyy-MM-dd HH:mm:ss')}"> </span>
							</li>

						</ul>
					</div>
				</div>
				<div class="boxfoot"></div>
			</div>
			<div class="boxall" style="height: 3.4rem">
				<div class="alltitle">实时异常操作记录</div>
				<div class="wrap">
					<ul class="clearfix">
						<li class="clearfix" th:each="syslog,syslogStat : ${sysOperLogs}">
							<span class="pulll_left" th:text="${syslogStat.count}"></span>

							<span class="pulll_left" th:text="${syslog.title}"></span>
							<span class="pulll_right" th:text="${#dates.format(syslog.operTime, 'yyyy-MM-dd HH:mm:ss')}"> </span>
						</li>
					</ul>
				</div>
				<div class="boxfoot"></div>
			</div>
		</li>
	</ul>

</div>
<div class="back"></div>
<script th:src="@{/js/js.js}"></script>
<script th:src="@{/js/echarts.min.js}"></script>
<script th:src="@{/js/china.js}"></script>
<script th:src="@{/js/area_echarts.js}"></script>
<script th:src="@{/js/echarts.min.js}"></script>
<script type="text/javascript">
	$(document).ready(function () {
		myChart1.resize();
		myChart2.resize();
		myChart3.resize();
		myChart6.resize();
		myChart7.resize();
		myChart8.resize();
		myChart9.resize();
        myChart10.resize();
	});
	window.addEventListener("resize", function () {
		myChart1.resize();
		myChart2.resize();
		myChart3.resize();
		myChart6.resize();
		myChart7.resize();
		myChart8.resize();
		myChart9.resize();
        myChart10.resize();
	});
</script>
<script type="text/javascript">
	var v0 = 1000;
	var v1 = 353;
	var v2 = 178;
	var v3 = 68;
	var myChart6 = echarts.init(document.getElementById('echarts6'));
	option6 = {
		series: [{
			type: 'pie',
			radius: ['70%', '80%'],
			color: '#0088cc',
			label: {
				normal: {
					position: 'center'
				}
			},
			data: [{
				value: v1,
				name: '新增会员',
				label: {
					normal: {
						formatter: v1 + '',
						textStyle: {
							fontSize: 20,
							color: '#fff',
						}
					}
				}
			},
				{
					value: v0,
					name: '老会员',
					label: {
						normal: {
							formatter: function (params) {
								return '占比60%'
							},
							textStyle: {
								color: '#aaa',
								fontSize: 12
							}
						}
					},
					itemStyle: {
						normal: {
							color: 'rgba(255,255,255,.2)'
						},
						emphasis: {
							color: '#fff'
						}
					},
				}]
		}]

	};

	var myChart7 = echarts.init(document.getElementById('echarts7'));
	option7 = {
		series: [{
			type: 'pie',
			radius: ['70%', '80%'],
			color: '#fccb00',
			label: {
				normal: {
					position: 'center'
				}
			},
			data: [{
				value: v2,
				name: '新增领卡会员',
				label: {
					normal: {
						formatter: v2 + '',
						textStyle: {
							fontSize: 20,
							color: '#fff',
						}
					}
				}
			},
				{
					value: v0,
					name: '总领卡会员',
					label: {
						normal: {
							formatter: function (params) {
								return '占比40%'
							},
							textStyle: {
								color: '#aaa',
								fontSize: 12
							}
						}
					},
					itemStyle: {
						normal: {
							color: 'rgba(255,255,255,.2)'
						},
						emphasis: {
							color: '#fff'
						}
					},
				}]
		}]
	};
	var myChart8 = echarts.init(document.getElementById('echarts8'));
	option8 = {
		series: [{
			type: 'pie',
			radius: ['70%', '80%'],
			color: '#62b62f',
			label: {
				normal: {
					position: 'center'
				}
			},
			data: [{
				value: v3,
				name: '女消费',
				label: {
					normal: {
						formatter: v3 + '',
						textStyle: {
							fontSize: 20,
							color: '#fff',
						}
					}
				}
			}, {
				value: v0,
				name: '男消费',
				label: {
					normal: {
						formatter: function (params) {
							return '占比34%'
						},
						textStyle: {
							color: '#aaa',
							fontSize: 12
						}
					}
				},
				itemStyle: {
					normal: {
						color: 'rgba(255,255,255,.2)'
					},
					emphasis: {
						color: '#fff'
					}
				},
			}]
		}]
	};
    var myChart10 = echarts.init(document.getElementById('echarts10'));
    option10 = {
        series: [{
            type: 'pie',
            radius: ['70%', '80%'],
            color: '#62b62f',
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: v3,
                name: '女消费',
                label: {
                    normal: {
                        formatter: v3 + '',
                        textStyle: {
                            fontSize: 20,
                            color: '#fff',
                        }
                    }
                }
            }, {
                value: v0,
                name: '男消费',
                label: {
                    normal: {
                        formatter: function (params) {
                            return '占比66%'
                        },
                        textStyle: {
                            color: '#aaa',
                            fontSize: 12
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(255,255,255,.2)'
                    },
                    emphasis: {
                        color: '#fff'
                    }
                },
            }]
        }]
    };
	setTimeout(function () {
		myChart6.setOption(option6);
		myChart7.setOption(option7);
		myChart8.setOption(option8);
        myChart10.setOption(option10);
	}, 500);

</script>
  <!--钉钉数据同步情况-->
<script type="text/javascript">
	var myChart1 = echarts.init(document.getElementById('echarts1'));
	var v1 = [[${DingTalkSituation.failureNums}]];
	var v2 = [[${DingTalkSituation.successNums}]];
	var v3 = [[${DingTalkSituation.successRatio}]];
	var v4 = [[${DingTalkSituation.failureRatio}]];
	option1 = {
		series: [{
			type: 'pie',
			radius: ['70%', '80%'],
			color: '#0088cc',
			label: {
				normal: {
					position: 'center'
				}
			},
			data: [{
				value: v2,
				name: '同步成功数',
				label: {
					normal: {
						formatter: v2 + '',
						textStyle: {
							fontSize: 20,
							color: '#0088cc',
						}
					}
				}
			},
			]
		}]
	};
	var myChart9 = echarts.init(document.getElementById('echarts9'));
	option9 = {
       //同步失败数
		series: [{
			type: 'pie',
			radius: ['70%', '80%'],
			color: '#0088cc',
			label: {
				normal: {
					position: 'center'
				}
			},
			data: [{
				value: v1,
				name: '同步失败数',
				label: {
					normal: {
						formatter: v1 + '',
						textStyle: {
							fontSize: 20,
							color: '#FF0000',
						}
					}
				}
			},
			]
		}]
	};


	var myChart3 = echarts.init(document.getElementById('echarts3'));
	option2 = {

		series: [{
			type: 'pie',
			radius: ['70%', '80%'],
			color: '#fccb00',
			label: {
				normal: {
					position: 'center'
				}
			},
			data: [{
				value: v2,
				name: '成功数',
				label: {
					normal: {
						formatter: v2 + '',
						textStyle: {
							fontSize: 20,
							color: '#fff ',
						}
					}
				}
			}, {
				value: v1,
				name: '成功占比',
				label: {
					normal: {
						formatter: function (params) {
							return  v3+ '%'
						},
						textStyle: {
							color: '#fff ',
							fontSize: 12
						}
					}
				},
				itemStyle: {
					normal: {
						color: 'rgba(255,255,255,.2)'
					},
					emphasis: {
						color: '#fff'
					}
				},
			}]
		}]
	};

	var myChart2 = echarts.init(document.getElementById('echarts2'));
	option3 = {
		series: [{
			type: 'pie',
			radius: ['70%', '80%'],
			color: '#62b62f',
			label: {
				normal: {
					position: 'center'
				}
			},
			data: [{
				value: v1,
				name: '失败数',
				label: {
					normal: {
						formatter: v1+ '',
						textStyle: {
							fontSize: 20,
							color: '#FF0000',
						}
					}
				}
			}, {
				value: v1,
				name: '失败占比',
				label: {
					normal: {
						formatter: function (params) {
							return v4 + '%'
						},
						textStyle: {
							color: '#FF0000',
							fontSize: 12
						}
					}
				},
				itemStyle: {
					normal: {
						color: 'rgba(255,255,255,.2)'
					},
					emphasis: {
						color: '#fff'
					}
				},
			}]
		}]
	};
	setTimeout(function () {
		myChart1.setOption(option1);
		myChart9.setOption(option9)
		myChart2.setOption(option2);
		myChart3.setOption(option3);
	}, 500);

</script>
<script type="text/javascript">
	var myChart = echarts.init(document.getElementById('echarts4'));
	var consumptionTotal = [[${financeBillSituation.consumptionTotal}]];
	var plantCap = [
    {
		name: '即时到账',
		value: [[${financeBillSituation.immediatelyAccountTotal}]]
     },{
		name: '商户消费',
		value: consumptionTotal
	}, {
		name: '转账',
		value: [[${financeBillSituation.transferAccountsTotal}]]
	}, {
		name: '微信红包',
		value: [[${financeBillSituation.wxRedPacketsTotal}]]
	},
	{
		name: '支付宝担保交易',
		value: [[${financeBillSituation.alipaySecuredTransactionTotal}]]
	},
	{
		name:'扫二维码付款',
		value: [[${financeBillSituation.scannerQrCodePaymentTotal}]]
	},
	{
		name: '二维码收款',
		value: [[${financeBillSituation.qrCodePaymentTotal}]]
	}];
	var datalist = [
    {
		offset: [0, 70],
		symbolSize: 60,
		color: 'rgba(73,188,247,.14)',
	},
	{
		offset: [56, 48],
		symbolSize: 110,
		color: 'rgba(73,188,247,.14)',

	}, {
		offset: [30, 70],
		symbolSize: 70,
		color: 'rgba(73,188,247,.14)'
	}, {
		offset: [0, 23],
		symbolSize: 60,
		color: 'rgba(73,188,247,.14)'
	},  {
		offset: [93, 30],
		symbolSize: 60,
		color: 'rgba(73,188,247,.14)'
	},
	{
		offset: [85, 75],
		symbolSize: 60,
		color: 'rgba(73,188,247,.14)'
	},
	{
		offset: [26, 19],
		symbolSize: 60,
		color: 'rgba(73,188,247,.14)'
	}];

	var datas = [];
	for (var i = 0; i < plantCap.length; i++) {
		var item = plantCap[i];
		var itemToStyle = datalist[i];
		datas.push({
			name: item.value + '\n' + item.name,
			value: itemToStyle.offset,
			symbolSize: itemToStyle.symbolSize,
			label: {
				normal: {
					textStyle: {
						fontSize: 14
					}
				}
			},

			itemStyle: {
				normal: {
					color: itemToStyle.color,
					opacity: itemToStyle.opacity
				}
			},
		})
	}
	option = {
		grid: {
			show: false,
			top: 10,
			bottom: 10
		},

		xAxis: [{
			gridIndex: 0,
			type: 'value',
			show: false,
			min: 0,
			max: 100,
			nameLocation: 'middle',
			nameGap: 5
		}],

		yAxis: [{
			gridIndex: 0,
			min: 0,
			show: false,
			max: 100,
			nameLocation: 'middle',
			nameGap: 30
		}],
		series: [{
			type: 'scatter',
			symbol: 'circle',
			symbolSize: 120,
			label: {
				normal: {
					show: true,
					formatter: '{b}',
					color: '#FFF',
					textStyle: {
						fontSize: '30'
					}
				},
			},
			itemStyle: {
				normal: {
					color: '#F30'
				}
			},
			data: datas
		}]

	};
	myChart.setOption(option);
	$(document).ready(function () {
		myChart.resize();

	})
	window.addEventListener("resize", function () {
		myChart.resize();
	});
</script>
<script th:src="@{/js/jquery.waypoints.min.js}"></script>
<script th:src="@{/js/jquery.countup.min.js}"></script>
<script type="text/javascript">
	$('.counter').countUp();
</script>

</body>
</html>
